<!doctype html>
<html>
<title>jQuery平面图区域标记拖拽移动代码</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/context/context.js"></script>
<script type="text/javascript" src="/context/drag.js" ></script>
<link rel="stylesheet" type="text/css" href="/context/context.standalone.css">
<style type="text/css">
html,body{margin:0;padding:0;overflow:hidden;height:100%;OVERFLOW-Y: auto; OVERFLOW-X:hidden;width: 100%;}
#canvas{position:absolute;right:0;top:0;z-index:9;border:none;padding:0px;background:none;/*width: 87%;*/}
.transparent{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;}
.box1{width:200px;height:100px;position:absolute;top:30px;left:30px;z-index:99;}
.box1 .bg{width:100%;height:100%;background-color:orange;}
.box1 .coor{width:10px;height:10px;overflow:hidden;cursor:se-resize;position:absolute;right:0;bottom:0;background-color:red;}
.box1 .content{position:absolute;left:35%;top:100%;z-index:99;text-align:center;font:bold 10px/1.5em simsun;}
.option{ width: 18%;height: 20px; }
.option select{ border: none; outline: none;width: 100%; height: 40px;line-height: 40px;appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-left: 20px;}
.option:after{ content: ""; height: 18px;  position: absolute;right: 20px;   top: 41%; pointer-events: none;}
option{margin: 10px;}   
option:hover{ color:#fff; background-color:#1E90FF; }
pre {display: block;font-family: monospace;white-space: pre;margin: 1em 0px;background-color: rgba(255, 255, 255, 0);border: 0px solid #ccc;}
#debug{position:absolute;right:10px;top:10px;z-index:88;border:1px solid #ccc;width:100px;height:100px;background:#fff;}
#toolbar{position:absolute;width:10%;top:45px;height:700px;overflow-y:none;background-color: #ffffff;}
.right{width:100%}
.toolbar::-webkit-scrollbar {/*滚动条宽*/width: 4px;}
.toolbar::-webkit-scrollbar-thumb {border-radius: 5px;background-color: #586cb1;}
.toolbar::-webkit-scrollbar-track {box-shadow: inset 0 0 5px #ffffff;background: rgb(140, 140, 158);border-radius: 5px;}
.list-group-item{border-bottom-right-radius: none ;}
</style>
</head>
<input type="hidden" name="roomname" class="roomname" />
<body class="list">
<input type="hidden" value="" name="timer" id="timer" />
<input type="hidden" value="{{ $autoRefresh }}" name="refreshtime" id="refreshtime" />
<div id="hezi" class="right" style="display: flex;margin-top: -50px; margin-left: 100px;" >
    <span class="dropdown" style="display:inline-block">
        <a id="" class="dropdown-toggle btn btn-sm btn-white waves-effect" data-toggle="dropdown" href="javascript:void(0)">
            <stub id="stub">实时更新频率：{{$autoRefresh}}秒</stub><span class="caret"></span>
        </a>
        <ul class="dropdown-menu setAuto">
            <li class="dropdown-item" id="1"><a href="javascript:void(0)">更新频率：1秒</a></li>
            <li class="dropdown-item" id="5"><a href="javascript:void(0)">更新频率：5秒</a></li>
            <li class="dropdown-item" id="10"><a href="javascript:void(0)">更新频率：10秒</a></li>
            <li class="dropdown-item" id="30"><a href="javascript:void(0)">更新频率：30秒</a></li>
            <li class="dropdown-item" id="60"><a href="javascript:void(0)">更新频率：60秒</a></li>
        </ul>
    </span>
    <!--<div id="toolbar" class="toolbar" >
        <ul class="list-group" id="link" style="list-style-type:none;">
        @if($list)
            @foreach($list as $k => $one)
            @if($one['checked']=='true')
            <li class="list-group-item active" link="/admin/project/ProjectLocationView/{{$one['id']}}"  data-id="{{$one['id']}}">
                 <span>{{$one['name']}}</span>
            </li>
            @else
            <li class="list-group-item" link="/admin/project/ProjectLocationView/{{$one['id']}}" data-id="{{$one['id']}}">
                 <span>{{$one['name']}}</span>
            </li>
            @endif
            @endforeach
        @endif
        </ul>
    </div>-->
    <!-- <div>TTTT</div> -->
    <div id="canvas">
        <img id="ming" src="{{$planeJPG}}" />
    </div>
</div>
<!-- <script src="http://blog.aigouzhushou.com/layui-v2.4.3/layui-v2.4.5/layui.js"></script> -->
<script>
    $(function (){

        //新增未读报警消息时显示红色角标
        $('.fa-book').parent().prepend("<li class='ar-tag'></li>")
        $('.ar-tag').css({"positions":"relative","background":"#f00","border-radius":"50%","width":"8px","height":"8px","top":"100px","right":"5px","margin-left":"20px"});

        $(".list-group li").click(function(e){
            // 改变选择class
            $(this).siblings("li").removeClass("active");
            $(this).addClass("active");
            // 选中状态
            //    $(this).find("input").get(0).checked = true
        })
        $("ul#link").on("click" , "li" , function(){
            var link = $(this).attr("link");
            window.location.href=link;
        })
    });
</script>
<script>
    $('#select2').change(function(e){
        let url = "{{ URL::asset('admin/setLocationsAutoRefresh') }}";
        let data = {
            _token: '{{ csrf_token() }}',
            value: document.getElementById("select2").value,
        }
        $.ajax({
            type : "POST",
            url : url,
            data : data,
            success : function(result) {
                console.log(result)
                if (result.code == 1) {
                    location.reload();
                } else {
                    console.log(result.msg)
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                layer.close(e);
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    });
    $('#select').change(function() {
        //图层切换
        var options=$("#select option:selected");
        let url1 = "/admin/project/ProjectLocationView/"+options.val();
        // let url1 = '../location/'+$(this).val();
        window.location.href=url1;
        // console.log(options.val());
        // console.log($(this).val());
        // console.log(url1);
        //二:
        // var options=$("#select option:selected");
        // console.log(options.val());
    })
    $(document).ready(function () {
            if(location.href.indexOf("#reloaded")==-1){
                location.href=location.href+"#reloaded";
                location.reload();
            }
            // layer.prompt({
            //     title: '请输入区域尺寸（宽,高），最小值：30',
            //     formType: 0,
            //     value: 1
            // }, function(value, index, elem){
            //     var reg = /^[0-9]+,[0-9]+$/;
            //     if(!reg.test(value)){
            //         alert('输入格式不正确，例：100,200');
            //         return;
            //     }
            //     layer.close(index);
            // });
    })
    layui.use('upload', function () {
        var upload = layui.upload;
        let cookies = document.cookie.split(',');
        let pattern = /csrftoken=(.*)/m;
        let csrf;
        for (let j = 0; j < cookies.length; j++) {
            if (pattern.test(cookies[j])) {
                csrf = pattern.exec(cookies[j])[1];
            }
        }
        //执行实例
        var uploadInst = upload.render({
            elem: '#test10' //绑定元素
            , headers: {
                "X-CSRFToken": csrf
            }
            , auto: false
            , bindAction: "#upload"
            , url: '/api/uploadMap' //上传接口
            ,before: function(input){
                    var data = {};
                    data.pid = $('.pid').val();
                    data.roomname = function(){return $('.roomname').val();}   //动态获取input输入的值
                    data.project = $('.project').val();
                    this.data=data;
            }
            , choose: function (obj) {
                obj.preview(function (index, file, result) {
                    document.getElementById("file_name").innerHTML = file.name;
                })
            }
            , done: function (res) {
                if(res.status){
                    document.getElementsByClassName("layui-layer-close")[0].click()
                    layer.msg("上传成功");
                    window.location.reload();
                }else{
                    layer.msg(res.msg);
                }
            }
            , error: function () {
                layer.msg("上传失败，请重新上传")
            }
        });
    });
    $(".inputname").bind('input propertychange', function() {
        var a = $(".inputname").val();
        $(".roomname").val(a);
    })

</script>
<script>
$(function(){
    //初始化计数器
    var num = 0;
    //区块锁定标识
    var lock = false;
    //加载layer拓展
    layer.config({
        extend: 'extend/layer.ext.js'
    });
    //调试输出方法
    function debug(msg){
        $("#debug").text(msg);
    }
    function createBox(data){
        var dataId = data.id || '';
        var type = data.type || 1;
        var value = data.text || '';
        var value2 = data.value || '';
        var color = data.color || '';
        var height = data.height || 0;
        var width = data.width || 0;
        var pageX = data.pageX || 0;
        var pageY = data.pageY || 0;
        var rid = data.id;
        var cid = data.cid;
        var isbox = data.pid?1:0;
        var heartbeat = data.heartbeat;
        
        //更新计数器并记录当前计数
        var curNum = num++;
        //创建区域块
        var pos = $("#canvas").position();
        if(heartbeat==1){
            /*if(type==3){
                    var box = $('<div class="box" rel="'+curNum+'" isbox="'+isbox+'" dataId="'+dataId+'" type="'+type+'"><pre class="content">'+value+'</pre><img src="/uploads/images/alarm.gif"  alt="" /></div>').css({
                    width : width,
                    height : height,
                    top : pageY > 0 ? pageY : (pos.top > 0 ? 0 : pos.top * -1 + 50),
                    left : pageX > 0 ? pageX : (pos.left > 0 ? 0 : pos.left * -1 + 30)
                }).appendTo("#canvas");
            }else{
                var box = $('<div class="box" rel="'+curNum+'" isbox="'+isbox+'" dataId="'+dataId+'" type="'+type+'"><pre class="content">'+value+'</pre><img src="/uploads/images/Online.png"  alt="" /></div>').css({
                width : width,
                height : height,
                top : pageY > 0 ? pageY : (pos.top > 0 ? 0 : pos.top * -1 + 50),
                left : pageX > 0 ? pageX : (pos.left > 0 ? 0 : pos.left * -1 + 30)
            }).appendTo("#canvas");
            }*/ 
        }else{
            if(type==1){
                var box = $('<div class="box1" rel="'+curNum+'" isbox="'+isbox+'" dataId="'+dataId+'" type="'+type+'">'+value+'</div>').css({
                    width : width,
                    height : height,
                    top : pageY > 0 ? pageY : (pos.top > 0 ? 0 : pos.top * -1 + 50),
                    left : pageX > 0 ? pageX : (pos.left > 0 ? 0 : pos.left * -1 + 30)
                }).appendTo("#canvas");
            }else if(type==2){
                var box = $('<div class="box1" rel="'+curNum+'" isbox="'+isbox+'" dataId="'+dataId+'" type="'+type+'"><img style="width:20px" src="/uploads/images/green.png"  alt=""/>'+value+'</div>').css({
                    width : width,
                    height : height,
                    top : pageY > 0 ? pageY : (pos.top > 0 ? 0 : pos.top * -1 + 50),
                    left : pageX > 0 ? pageX : (pos.left > 0 ? 0 : pos.left * -1 + 30)
                }).appendTo("#canvas");
            }else if(type==3){
                var box = $('<div class="box1" rel="'+curNum+'" isbox="'+isbox+'" dataId="'+dataId+'" type="'+type+'">'+value+'<input type="text" name="" value="'+value2+'" style="width:38px;" />s</div>').css({
                    width : width,
                    height : height,
                    top : pageY > 0 ? pageY : (pos.top > 0 ? 0 : pos.top * -1 + 50),
                    left : pageX > 0 ? pageX : (pos.left > 0 ? 0 : pos.left * -1 + 30)
                }).appendTo("#canvas");
            }
        }
        //计算文本位置
        box.find('.content').css({
            marginLeft : box.find('.content').width()/2*-1,
            marginTop : box.find('.content').height()/2*-1
        });
    }
    //锁定区域
    $('#btn_lock').click(function(){
        if(lock){
            $(this).val("锁定区域");
            lock = false;
            $('.box .coor').show();
        }else{
            $(this).val("解锁区域");
            lock = true;
            $('.box .coor').hide();
        }
    });
    //创建拖拽方法
    $("#canvas").mousedown(function(e){
        var canvas = $(this);
        e.preventDefault();
        var pos = $(this).position();
        this.posix = {'x': e.pageX - pos.left, 'y': e.pageY - pos.top};
        $.extend(document, {'move': true, 'move_target': this, 'call_down' : function(e, posix){
            canvas.css({
                'cursor': 'move',
                'top': e.pageY - posix.y,
                'left': e.pageX - posix.x
            });
        }, 'call_up' : function(){
            canvas.css('cursor', 'default');
        }});
    }).on('mousedown', '.box1', function(e) {
        if(lock) return;
        var pos = $(this).position();
        this.posix = {'x': e.pageX - pos.left, 'y': e.pageY - pos.top};
        $.extend(document, {'move': true, 'move_target': this});
        e.stopPropagation();
    }).on('mousedown', '.box1 .coor', function(e) {
        var $box = $(this).parent();
        var posix = {
                'w': $box.width(), 
                'h': $box.height(), 
                'x': e.pageX, 
                'y': e.pageY
            };
        $.extend(document, {'move': true, 'call_down': function(e) {
            $box.css({
                'width': Math.max(30, e.pageX - posix.x + posix.w),
                'height': Math.max(30, e.pageY - posix.y + posix.h)
            });
        }});
        e.stopPropagation();
    });
    //测试加载
    var name = document.getElementById("ming").getAttribute("src");
    if(name =='/uploads/images/微信图片_20230414104344.jpg'){
        var loadData = [{id : 1,type: 1,text : "一次电压\n443V",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 250,pageY : 310},
            {id : 2,type: 1,text : "一次电流\n119A",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 250,pageY : 327},
            {id : 3,type: 1,text : "二次电压\n48kV",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 250,pageY : 359},
            {id : 4,type: 1,text : "二次电流\n338mA",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 250,pageY : 417},
            {id : 5,type: 1,text : "一次电压\n414V",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 250,pageY : 385},
            {id : 6,type: 1,text : "一次电流\n116A",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 250,pageY : 401},
            {id : 7,type: 1,text : "二次电压\n45kV",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 250,pageY : 432},
            {id : 8,type: 1,text : "二次电流\n312mA",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 250,pageY : 343},
            {id : 9,type: 1,text : "一次电压\n432V",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 386,pageY : 310},
            {id : 10,type: 1,text : "一次电流\n109A",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 386,pageY : 403},
            {id : 11,type: 1,text : "二次电压\n47kV",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 386,pageY : 360},
            {id : 12,type: 1,text : "二次电流\n321mA",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 386,pageY : 343},
            {id : 13,type: 1,text : "一次电压\n412V",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 386,pageY : 385},
            {id : 14,type: 1,text : "一次电流\n123A",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 386,pageY : 327},
            {id : 15,type: 1,text : "二次电压\n41kV",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 386,pageY : 434},
            {id : 16,type: 1,text : "二次电流\n345mA",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 386,pageY : 419},
            {id : 17,type: 1,text : "一次电压\n436V",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 530,pageY : 310},
            {id : 18,type: 1,text : "一次电流\n106A",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 530,pageY : 330},
            {id : 19,type: 1,text : "二次电压\n40kV",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 530,pageY : 362},
            {id : 20,type: 1,text : "二次电流\n366mA",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 530,pageY : 345},
            {id : 21,type: 1,text : "一次电压\n423V",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 530,pageY : 385},
            {id : 22,type: 1,text : "一次电流\n115A",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 530,pageY : 403},
            {id : 23,type: 1,text : "二次电压\n42kV",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 530,pageY : 435},
            {id : 24,type: 1,text : "二次电流\n388mA",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 530,pageY : 419},
            {id : 25,type: 1,text : "一次电压\n401V",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 664,pageY : 310},
            {id : 26,type: 1,text : "一次电流\n101A",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 664,pageY : 328},
            {id : 27,type: 1,text : "二次电压\n43kV",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 664,pageY : 361},
            {id : 28,type: 1,text : "二次电流\n343mA",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 664,pageY : 345},
            {id : 29,type: 1,text : "一次电压\n425V",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 664,pageY : 385},
            {id : 30,type: 1,text : "一次电流\n126A",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 664,pageY : 401},
            {id : 31,type: 1,text : "二次电压\n40kV",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 664,pageY : 434},
            {id : 32,type: 1,text : "二次电流\n326mA",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 664,pageY : 417},
            {id : 101,type: 1,text : "进口温度\n134°C",color : "rgb(0, 0, 255)",height : 30,width : 100,pageX : 81,pageY : 335},
            {id : 102,type: 1,text : "出口温度\n127.8°C",color : "rgb(255, 165, 0)",height : 30,width : 100,pageX : 856,pageY : 324},
            {id : 103,type: 1,text : "进口粉尘浓度\n3g/m3",color : "rgb(255, 165, 0)",height : 30,width : 100,pageX : 77,pageY : 450},
            {id : 104,type: 1,text : "出口粉尘浓度\n50g/m3",color : "rgb(255, 165, 0)",height : 30,width : 100,pageX : 858,pageY : 444}];
        $.each(loadData, function(i, row){
            createBox(row);
        });
    }else if(name =='/uploads/images/微信图片_20230412171527.jpg'){
        var loadData = [
            {id : 42,type: 1,text : "一电场\n",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 210,pageY : 306},
            {id : 43,type: 1,text : "二电场\n",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 387,pageY : 306},
            {id : 44,type: 1,text : "三电场\n",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 550,pageY : 306},
            {id : 45,type: 1,text : "四电场\n",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 714,pageY : 306},

            {id : 34,type: 2,text : "62\n°C",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 213,pageY : 340},
            {id : 35,type: 2,text : "70\n°C",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 387,pageY : 340},
            {id : 36,type: 2,text : "72\n°C",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 556,pageY : 340},
            {id : 37,type: 2,text : "67\n°C",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 717,pageY : 340},
            {id : 38,type: 2,text : "76\n°C",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 213,pageY : 377},
            {id : 39,type: 2,text : "58\n°C",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 387,pageY : 377},
            {id : 40,type: 2,text : "53\n°C",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 556,pageY : 377},
            {id : 41,type: 2,text : "59\n°C",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 717,pageY : 377},

            {id : 1,type: 2,text : "99\n°C",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 182,pageY : 243},
            {id : 2,type: 2,text : "121\n°C",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 331,pageY : 243},
            {id : 33,type: 2,text : "133\n°C",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 498,pageY : 243},
            {id : 3,type: 2,text : "125\n°C",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 662,pageY : 243},
            {id : 4,type: 2,text : "105\n°C",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 813,pageY : 243},
            {id : 5,type: 2,text : "1#上阴极\n",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 308,pageY : 278},

            {id : 6,type: 2,text : "2#上阴极\n",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 476,pageY : 278},
            {id : 7,type: 2,text : "3#上阴极\n",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 644,pageY : 278},
            {id : 8,type: 2,text : "4#上阴极\n",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 810,pageY : 278},
            {id : 9,type: 2,text : "1#下阴极\n",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 308,pageY : 393},
            {id : 10,type: 2,text : "2#下阴极\n",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 471,pageY : 393},
            {id : 11,type: 2,text : "3#下阴极\n",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 644,pageY : 393},
            {id : 12,type: 2,text : "4#下阴极\n",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 814,pageY : 393},
            {id : 13,type: 2,text : "1#阳极\n",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 185,pageY : 423},
            {id : 14,type: 2,text : "2#阳极\n",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 356,pageY : 423},
            {id : 15,type: 2,text : "3#阳极\n",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 521,pageY : 423},
            {id : 16,type: 2,text : "4#阳极\n",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 681,pageY : 423},
            
            {id : 17,type: 2,text : "高料位\n",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 202,pageY : 458},
            {id : 18,type: 2,text : "高料位\n",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 369,pageY : 458},
            {id : 19,type: 2,text : "高料位\n",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 535,pageY : 458},
            {id : 20,type: 2,text : "高料位\n",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 696,pageY : 458},
            {id : 21,type: 2,text : "底料位\n",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 290,pageY : 471},
            {id : 22,type: 2,text : "底料位\n",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 456,pageY : 471},
            {id : 23,type: 2,text : "底料位\n",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 619,pageY : 471},
            {id : 24,type: 2,text : "底料位\n",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 793,pageY : 471},
            {id : 25,type: 2,text : "仓振\n",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 247,pageY : 511},
            {id : 26,type: 2,text : "仓振\n",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 417,pageY : 511},
            {id : 27,type: 2,text : "仓振\n",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 581,pageY : 511},
            {id : 28,type: 2,text : "仓振\n",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 747,pageY : 511},
            {id : 29,type: 2,text : "卸灰\n",color : "rgb(255, 0, 0)",height : 30,width : 100,pageX : 247,pageY : 563},
            {id : 30,type: 2,text : "卸灰\n",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 416,pageY : 563},
            {id : 31,type: 2,text : "卸灰\n",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 582,pageY : 563},
            {id : 32,type: 2,text : "卸灰\n",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 748,pageY : 563},
            {id : 101,type: 1,text : "进口温度\n134°C",color : "rgb(0, 0, 255)",height : 30,width : 100,pageX : 73,pageY : 268},
            {id : 102,type: 1,text : "出口温度\n127.8°C",color : "rgb(255, 165, 0)",height : 30,width : 100,pageX : 889,pageY : 255},
            {id : 103,type: 1,text : "进口粉尘浓度\n3g/m3",color : "rgb(255, 165, 0)",height : 30,width : 100,pageX : 70,pageY : 448},
            {id : 104,type: 1,text : "出口粉尘浓度\n50g/m3",color : "rgb(255, 165, 0)",height : 30,width : 100,pageX : 885,pageY : 428}];
        $.each(loadData, function(i, row){
            createBox(row);
        });
    }else if(name =='/uploads/images/微信图片_20230417112213.jpg'){
        var loadData = [
            {id : 42,type: 1,text : "一电场\n",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 193,pageY : 472},
            {id : 43,type: 1,text : "二电场\n",color : "rgb(255, 255, 0)",height : 30,width : 100,pageX : 380,pageY : 472},
            {id : 44,type: 1,text : "三电场\n",color : "rgb(128, 0, 128)",height : 30,width : 100,pageX : 576,pageY : 472},
            {id : 45,type: 1,text : "四电场\n",color : "rgb(0, 128, 0)",height : 30,width : 100,pageX : 763,pageY : 472},
            
            {id : 34,type: 3,text : "1#阳极振打初始延时\n",value:"60",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 263},
            {id : 35,type: 3,text : "1#阳极振打间歇时间\n",value:"120",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 292},
            {id : 35,type: 3,text : "1#阳极振打工作时间\n",value:"180",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 319},
            {id : 36,type: 3,text : "1#阴极振打初始延时\n",value:"60",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 349},
            {id : 37,type: 3,text : "1#阴极振打间歇时间\n",value:"360",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 376},
            {id : 38,type: 3,text : "1#阴极振打工作时间\n",value:"190",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 403},

            {id : 34,type: 3,text : "1#阳极振打初始延时\n",value:"60",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 263},
            {id : 35,type: 3,text : "1#阳极振打间歇时间\n",value:"120",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 292},
            {id : 35,type: 3,text : "1#阳极振打工作时间\n",value:"180",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 319},
            {id : 36,type: 3,text : "1#阴极振打初始延时\n",value:"60",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 349},
            {id : 37,type: 3,text : "1#阴极振打间歇时间\n",value:"360",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 376},
            {id : 38,type: 3,text : "1#阴极振打工作时间\n",value:"190",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 403},
            {id : 34,type: 3,text : "1#阳极振打初始延时\n",value:"60",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 263},
            {id : 35,type: 3,text : "1#阳极振打间歇时间\n",value:"120",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 292},
            {id : 35,type: 3,text : "1#阳极振打工作时间\n",value:"180",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 319},
            {id : 36,type: 3,text : "1#阴极振打初始延时\n",value:"60",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 349},
            {id : 37,type: 3,text : "1#阴极振打间歇时间\n",value:"360",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 376},
            {id : 38,type: 3,text : "1#阴极振打工作时间\n",value:"190",color : "rgb(255, 255, 0)",height : 30,width : 180,pageX : 125,pageY : 403},


            {id : 101,type: 1,text : "进口温度\n134°C",color : "rgb(0, 0, 255)",height : 30,width : 100,pageX : 36,pageY : 258},
            {id : 102,type: 1,text : "出口温度\n127.8°C",color : "rgb(255, 165, 0)",height : 30,width : 100,pageX : 915,pageY : 259},
            {id : 103,type: 1,text : "进口粉尘浓度\n3g/m3",color : "rgb(255, 165, 0)",height : 30,width : 100,pageX : 26,pageY : 447},
            {id : 104,type: 1,text : "出口粉尘浓度\n50g/m3",color : "rgb(255, 165, 0)",height : 30,width : 100,pageX : 900,pageY : 435}];
        $.each(loadData, function(i, row){
            createBox(row);
        });
    }
    /*var loadData = <?php echo $data;?>;
    var pid = <?php echo $pid;?>;
    $.each(loadData, function(i, row){
        if(isJSON(row)==true){
            row = JSON.parse(row)
        }
        createBox(row);
    });*/
    function isJSON(str) {
        if (typeof str == 'string') {
            return true
        }else{
            return false
        }
    }
    // let autoRefresh = {{$autoRefresh}}
    var timer = setTimeout(getData{{$id}}, 1000*{{ $autoRefresh }});
    function getData{{$id}}(){
        if (window.parent.location.href.indexOf('ProjectLocationView/'+{{$id}}) < 0) {
            return;
        }
        // console.log($("#refreshtime").val());
        var timer = setTimeout(getData{{$id}}, 1000*$("#refreshtime").val());
        var obj = document.getElementById("timer");
        obj.value = timer
        // console.log('内：'+timer)
        let url = "{{ URL::asset('admin/getLocationsData') }}";
            let data = {
                _token: '{{ csrf_token() }}',
                id: {{ $id }}
            }
            $.ajax({
                type : "POST",
                url : url,
                data : data,
                success : function(result) {
                    if (result.code == 1) {
                        $('.box').remove();
                        $.each(result.data, function(i, row){
                            // console.log(row)
                            if(isJSON(row)==true){
                                row = JSON.parse(row)
                            }
                            createBox(row);
                        });
                        console.log(result.alarm)
                        // var alarm = JSON.parse(result.alarm)
                        if((JSON.stringify(result.alarm)!="{}")&&(result.alarm.length>0)){
                            $.each($.parseJSON(result.alarm), function(i1, row1){
                                var msgs = row1[0]
                                if(pid==46){var msgs = row1}
                                layer.confirm(i1+'报警：'+row1, {
                                    btn: ['确认报警','关闭'] //按钮
                                }, function(){
                                    let url = "{{ URL::asset('admin/ReleaseAlarm') }}";
                                    let data1 = {
                                        _token: '{{ csrf_token() }}',
                                        id:i1,
                                        msg: msgs,
                                        pid:pid,
                                    }
                                    $.ajax({
                                        type: "POST",//规定传输方式
                                        url: url,//提交URL
                                        data: data1,//提交的数据
                                        success: function(data){
                                            console.log(data)
                                            layer.msg(data.msg);
                                        }
                                    });
                                }, function(){
                                    // layer.msg('也可以这样', {
                                    //     time: 20000, //20s后自动关闭
                                    //     btn: ['明白了', '知道了']
                                    // });
                                }); 
                            });
                        }
                    } else {
                        console.log(result.msg)
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    layer.close(e);
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
    }
    $('.setAuto').on('click', 'li', function(e) {
        var num = this.id
        let url = "{{ URL::asset('admin/setAutoRefresh') }}";
        $.ajax({
           type: "POST",//规定传输方式
           url: url,//提交URL
           data: {'key':'location_refresh','value':num},//提交的数据
           success: function(data){
                clearTimeout($("#timer").val())
                var refreshtime = document.getElementById("refreshtime");
                refreshtime.value = num
                var timer = setTimeout(getData{{$id}}(num), 1000*num);
                // layer.msg(data.resulMsg);
           }
        });
    });

});
</script>
</body>
</html>